<template>
  <div class="Rightnav" id="mapLocalDiv">
    <!-- <cesc-map ref="baseMap"></cesc-map> -->
    <paint-btn :baseView="baseView" :draw="draw" :showLayer="showLayer" :apiInstance="apiInstance" :bdLayer="bdLayer" :editLayer="editLayer"></paint-btn>
  </div>
</template>

<script>
import arcgisAPI from '../arcgisAPI' 
import PaintBtn from './PaintBtn.vue'

export default {
  name: 'Rightnav',
  data () {
    return {
      baseView: {},
      showLayer: null, // 显示图层
      editLayer: null, // 编辑图层
      draw: null,      // 画笔功能
      apiInstance: {}, // 封装所有的画图方法
      bdLayer: {},//地图服务图层
    }
  },
  components: {
    PaintBtn
  },
  created () {
    arcgisAPI.getInstance(instance => {
      this.apiInstance = instance;
      let spatialReference = new this.apiInstance.SpatialReference({
        wkid: "4326"
      });
      let map = new this.apiInstance.Map({});
      let view = new this.apiInstance.MapView({
        container: 'mapLocalDiv',//该地图对象的id
        map: map,
        center: [112.828, 22.896], //中心点坐标--改
        zoom: 12, //初始化缩放--改
        spatialReference: spatialReference
      });
      var TDLayers = this.apiInstance.initTDLayer('vec', 4326)
      TDLayers.forEach(function (layer, index) {
        map.add(layer, index);
      });

      view.ui.remove("attribution");
      this.baseView = view;
      this.currentMap = map ;
      this.draw = new this.apiInstance.Draw({
        view: this.baseView
      })//实例化画笔
      this.showLayer = this.apiInstance.createGraphicsLayer(map, view, 'showLayer')
      this.editLayer = this.apiInstance.createGraphicsLayer(map, view, 'showLayer')
      var layer = new this.apiInstance.MapImageLayer({
        url: 'http://139.159.246.205:6080/arcgis/rest/services/jmts/pipe_group_by_sort/MapServer',
        // spatialReference: this.spatialReference
      });
      map.add(layer)
      this.bdLayer = layer
      this.bdLayer.visible = false
  })
  }
}

</script>

<style scoped>
.Rightnav {
  position: relative;
  width: 100%;
  height: 100%;

}
</style>